<template>
  <div>
    <f-header :isCollapse.sync="isCollapse"></f-header>
    <div class="home-center">
      <f-menu :isCollapse="isCollapse"></f-menu>
      <div class="home-router-view">
        <el-breadcrumb class="center-breadcrumb" separator=" ">
          <el-breadcrumb-item v-for="item in levelList" :key="item.path" :to="{ name: item.name }">{{item.name}}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <router-view ref="aaa"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  import HeaderComponent from '../components/header';
  import MenuComponent from '../components/menu';

  export default {
    components: {
      fHeader: HeaderComponent,
      fMenu: MenuComponent
    },
    data() {
      return {
        isCollapse: false,
        levelList: null,
      }
    },
    created() {
      this.getBreadcrumb()
    },
    getBreadcrumb() {
      this.levelList = this.$route.matched.filter(item => item.name)
      if (this.levelList[0].name !== '默认') this.levelList.unshift({
        path: '/index/home',
        name: '默认'
      })
    },
    watch: {
      $route() {
        this.getBreadcrumb()
      }
    }
  }
</script>

<style lang="scss">
  .home-center {
    display: flex;
    justify-content: space-between;
    & > .home-router-view {
      flex: 1;
      .center-breadcrumb {
        font-size: 16px;
        padding: 25px 0 25px 40px;
      }
    }
  }
</style>
